<template>
  <div class="container">
    <div class="wrap">
      <div class="left">
        <div class="merge-column">星期/时间</div>
        <div v-for="(weekItem, index) in week" :key="index" class="td-title">{{ weekItem }}</div>
      </div>
      <div class="right">
        <div class="top">
          <div class="merge-row">00:00-12:00</div>
          <div class="merge-row">12:00-24:00</div>
          <div v-for="(item, index) in 24" :key="index" class="unit">{{ index }}</div>
        </div>
        <div class="bottom" @mousedown="handleMouseDown">
          <div
            v-show="positionList.is_show_mask"
            :style="'width:' + mask_width + 'left:' + mask_left + 'height:' + mask_height + 'top:' + mask_top"
            class="mask"
          />
          <div
            v-for="(item, index) in dataItem"
            :key="index"
            class="select-item"
            :class="{selected: item.selected ? true : false}"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const positionList = {
  is_show_mask: false,
  box_screen_left: 0, // 盒子距离浏览器左侧的距离
  box_screen_top: 0, // 盒子距离浏览器顶部的距离
  start_x: 0,
  start_y: 0,
  end_x: 0,
  end_y: 0
}
export default {
  data() {
    return {
      dialogVisible: false,
      week: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
      totalNum: 336,
      dataItem: [],
      isClick: true,
      positionList: { ...positionList }
    }
  },
  computed: {
    mask_width() {
      return `${Math.abs(this.positionList.end_x - this.positionList.start_x)}px;`
    },
    mask_height() {
      return `${Math.abs(this.positionList.end_y - this.positionList.start_y)}px;`
    },
    mask_left() {
      return `${Math.min(this.positionList.start_x, this.positionList.end_x) - this.positionList.box_screen_left}px;`
    },
    mask_top() {
      return `${Math.min(this.positionList.start_y, this.positionList.end_y) - this.positionList.box_screen_top}px;`
    }
  },
  created() {
    this.initList()
  },
  methods: {
    initList() {
      for (let i = 1; i <= this.totalNum; i++) {
        const map = {
          selected: false,
          key: i
        }
        this.dataItem.push(map)
      }
    },
    handleMouseDown(event) {
      this.positionList.is_show_mask = true
      this.positionList.start_x = event.clientX
      this.positionList.start_y = event.clientY
      this.positionList.end_x = event.clientX
      this.positionList.end_y = event.clientY
      this.positionList.box_screen_left = document.querySelector('.bottom').getBoundingClientRect().left
      this.positionList.box_screen_top = document.querySelector('.bottom').getBoundingClientRect().top
      document.body.addEventListener('mousemove', this.handleMouseMove) // 监听鼠标移动事件
      document.body.addEventListener('mouseup', this.handleMouseUp) // 监听鼠标抬起事件
    },
    handleMouseMove(event) {
      this.positionList.end_x = event.clientX
      this.positionList.end_y = event.clientY
    },
    handleMouseUp(event) {
      document.body.removeEventListener('mousemove', this.handleMouseMove)
      document.body.removeEventListener('mouseup', this.handleMouseUp)
      this.positionList = { ...positionList }
      this.positionList.is_show_mask = false
      this.handleDomSelect()
      this.resSetXY()
    },
    handleDomSelect() {
      const dom_mask = window.document.querySelector('.mask')
      // getClientRects()方法 每一个盒子的边界矩形的矩形集合
      const rect_select = dom_mask.getClientRects()[0]
      document.querySelectorAll('.select-item').forEach((node, index) => {
        const rects = node.getClientRects()[0]
        if (this.collide(rects, rect_select) === true) {
          this.dataItem[index].selected = !this.dataItem[index].selected
        }
      })
    },
    collide(rect1, rect2) {
      const maxX = Math.max(rect1.x + rect1.width, rect2.x + rect2.width)
      const maxY = Math.max(rect1.y + rect1.height, rect2.y + rect2.height)
      const minX = Math.min(rect1.x, rect2.x)
      const minY = Math.min(rect1.y, rect2.y)
      return maxX - minX <= rect1.width + rect2.width && maxY - minY <= rect1.height + rect2.height
    },
    resSetXY() {
      this.positionList.start_x = 0
      this.positionList.start_y = 0
      this.positionList.end_x = 0
      this.positionList.end_y = 0
    }
  }
}
</script>

  <style lang="scss" scoped>
  .container {
    .wrap {
      display: flex;
      border: 1px solid #f1f1f1;
      border-bottom: 0;
      .left {
        .merge-column {
          width: 4vw;
          height: 6vh;
          padding: 3px 5px;
          min-width: 76px;
          min-height: 55px;
          display: flex;
          align-items: center;
          border-right: 1px solid #f1f1f1;
          border-bottom: 1px solid #f1f1f1;
        }
        .td-title {
          width: 4vw;
          height: 3vh;
          min-height: 27px;
          min-width: 76px;
          padding: 3px 5px;
          text-align: center;
          border-right: 1px solid #f1f1f1;
          border-bottom: 1px solid #f1f1f1;
        }
        &:last-child {
          border-bottom: 0;
        }
      }
      .right {
        display: flex;
        flex-wrap: wrap;
        .top {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-content: flex-start;
          .merge-row {
            width: 50%;
            height: 3vh;
            padding: 3px 5px;
            min-width: 420px;
            min-height: 27px;
            text-align: center;
            border-right: 1px solid #f1f1f1;
            border-bottom: 1px solid #f1f1f1;
            &:nth-child(2) {
              border-right: 0;
            }
          }
          .unit {
            width: calc(100% / 24);
            height: 3vh;
            padding: 3px 5px;
            min-width: 35px;
            min-height: 27px;
            text-align: center;
            border-right: 1px solid #f1f1f1;
            border-bottom: 1px solid #f1f1f1;
            &:last-child {
              border-right: 0;
            }
          }
        }
        .bottom {
          width: 100%;
          position: relative;
          display: flex;
          flex-wrap: wrap;
          .mask {
            position: absolute;
            background: #409eff;
            opacity: 0.4;
            z-index: 100;
            left: 0;
            top: 0;
          }
          .select-item {
            width: calc(100% / 48);
            height: 3vh;
            min-width: 17px;
            min-height: 27px;
            cursor: pointer;
            padding: 3px 5px;
            border-right: 1px solid #f1f1f1;
            border-bottom: 1px solid #f1f1f1;
            &:hover {
              background: #f1f1f1;
            }
          }
          .selected {
            background: #7bc8ff;
            &:hover {
              background: #7bc8ff;
            }
          }
          *:nth-child(48n + 1) {
            border-right: 0;
          }
        }
      }
    }
  }
  </style>

